大家好！

今天我們要實作讓網頁的字型大小能平滑地縮放。
我們進入今天的主題吧！

樣式

body {
    font-size: 16px;
    transition: font-size 0.5s;
}

body[data-font-size="18"] {
    font-size: 18px;
}

body[data-font-size="20"] {
    font-size: 20px;
}

在 body 內的元素，其 font-size 必須要是 em 單位。

程式碼

Felix(window).on('load', function () {
    Felix('#font-size-selector').on('click', function (e) {
        const size = [16, 18, 20];
        const index = [].slice.call(this.children).indexOf(e.target);
        Felix('body')[0].dataset.fontSize = size[index];
    });
});

實測

<div id="font-size-selector">
    <span>A</span>
    <span>A</span>
    <span>A</span>
</div>

範例連結製作中。

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！